<template>
    <div style="background: #fff">
        <h4>{{ mytitle }}</h4>

        <ul class="product_list">
            <li v-for="item in goodsList" :key="item.id" @click="goToDetails(item.id)">
                <img v-lazy="item.list_pic_url" alt="" />
                <div>{{ item.name }}</div>
                <section>{{ item.retail_price | formatPrice }}</section>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ['goodsList', 'mytitle'],
    data() {
        return {};
    },
    methods: {
        goToDetails(id) {
            // this.$router.push('/details/' + id);
        },
    },
};
</script>

<style lang="less" scoped>
h4 {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
}
.product_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    li {
        width: 49%;
        background: #fff;
        text-align: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
        img {
            width: 100%;
            display: block;
        }
        section {
            margin-top: 5px;
            color: darkred;
        }
    }
}
</style>
